<template>
  <section>
    <el-row>
      <el-col :span="10"  style="padding: 18px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button type="primary">新增相关</el-button>
            <el-button  style="float: right" type="primary" icon="el-icon-edit" circle @click="addItem1=!addItem1"></el-button>
          </div>
          <div v-for="o in addList" :key="o" class="text item">
            {{o}}
          </div>
          <div v-show="addItem1">
            <el-input @keyup.enter.native="addValue1"></el-input>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" style="padding: 18px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button type="primary">删除相关</el-button>
            <el-button  style="float: right" type="primary" icon="el-icon-edit" circle ></el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="padding: 18px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button type="primary">查询相关</el-button>
            <el-button  style="float: right" type="primary" icon="el-icon-edit" circle ></el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" style="padding: 18px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button type="primary">修改相关</el-button>
            <el-button  style="float: right" type="primary" icon="el-icon-edit" circle ></el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  name: 'ApiShow',
  data () {
    return {
      addItem1: false,
      addList: []
    }
  },
  methods: {
    addValue1 (event) {
      this.addList.push(event.target.value)
      this.addItem1 = false
      event.target.value = ''
    }
  }
}
</script>

<style scoped lang="scss">
  .item {
    margin-bottom: 12px;
  }
</style>
